import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/bar/lit-bar-y-stack.ts"
import {BarYStackProps} from "../../../echarts/bar/lit-bar-y-stack.ts";

const meta: Meta<BarYStackProps> = {
    title: 'Echarts/LitBarYStack',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'tooltip以及其他各类事件暂时无法在storybook中使用，具体请参考echarts的文档',
            },
        }
    },
    render: (args: BarYStackProps): TemplateResult => {
        return html`<lit-bar-y-stack 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .legend=${args.legend}
            .grid=${args.grid}
            .yAxisData=${args.yAxisData}
            .seriesData=${args.seriesData}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        legend: { control: 'object' },
        grid: { control: 'object' },
        yAxisData: { control: 'object' },
        seriesData: { control: 'object' },
    },
};

export default meta;
type Story = StoryObj<BarYStackProps>;

export const Default: Story = {
    args: {
        chartId: 'bar-y-stack-chart',
        width: '1200px',
        height: '600px',
        legend: ['Direct', 'Mail Ad', 'Affiliate Ad', 'Video Ad', 'Search Engine'],
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        yAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [
            [320, 302, 301, 334, 390, 330, 320],
            [120, 132, 101, 134, 90, 230, 210],
            [220, 182, 191, 234, 290, 330, 310],
            [150, 212, 201, 154, 190, 330, 410],
            [820, 832, 901, 934, 1290, 1330, 1320]
        ],
    },
};